<template>
  <div class="bg-white _p-20 _pt-5 _mt-20" style="flex:1">
    <div class="fz-16 title linh-48 disFlxAC">
      <div>{{ title }}</div>
      <span style="color:#86909C;font-size: 14px;">（按净销售统计）</span>
    </div>
    <div class="box">
      <div class="item">
        <div class="item-left">
          <div class="ticket-name">报名类型</div>
          <div class="progress-fake">柱状图</div>
          <div class="value">{{ valueTitle }}</div>
        </div>
        <div class="rate">占比</div>
      </div>
      <div v-for="(item, index) in list" :key="index" class="item">
        <div class="item-left">
          <div class="ticket-name">{{ item.ticketName }}</div>
          <a-progress :percent="accMul(item.rate || 0, 100)" :show-info="false" :strokeWidth="8" />
          <div class="value">{{ item.type === 'price' ? '￥' : '' }}{{ item.value }}</div>
        </div>
        <div class="rate">{{ accMul(item.rate || 0, 100) }}%</div>
      </div>
    </div>
  </div>
</template>

<script>
import { accMul } from '@/utils/number'
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    valueTitle: {
      type: String,
      default: ''
    }
  },
  computed: {},
  data() {
    return {}
  },
  methods: {
    accMul
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #1d2129;
  border-bottom: solid 1px #e5e6eb;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  gap: 20px;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    .item-left {
      display: flex;
      flex: 1;
      align-items: center;
      gap: 16px;

      .ticket-name {
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
      }
      .progress-fake {
        width: 100%;
        text-align: center;
      }

      .value {
        width: 100px;
      }
    }

    .rate {
      width: 64px;
    }
  }
}
</style>
